{% extends "blog/base.html" %}

{% block blog_content %}
<div class="row">
    <div class="col-md-8">
        <article>
            <h1>{{ post.title }}</h1>
            <p class="text-muted">
                By <strong>{{ post.author }}</strong> on {{ post.date }} in 
                <span class="badge bg-secondary">{{ post.category }}</span>
            </p>
            
            <div class="mt-4">
                {{ post.content|safe }}
            </div>
        </article>
        
        <div class="mt-4">
            <h4>Comments</h4>
            {% if comments %}
                {% for comment in comments %}
                    <div class="card mb-2">
                        <div class="card-body">
                            <p class="card-text">{{ comment.content }}</p>
                            <small class="text-muted">By {{ comment.author }} on {{ comment.date }}</small>
                        </div>
                    </div>
                {% endfor %}
            {% else %}
                <p>No comments yet. Be the first to comment!</p>
            {% endif %}
            
            <div class="card mt-3">
                <div class="card-header">
                    <h5>Leave a Comment</h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ url_for('blog.add_comment', post_id=post.id) }}">
                        <div class="mb-3">
                            <label for="comment_author" class="form-label">Name</label>
                            <input type="text" class="form-control" id="comment_author" name="author" required>
                        </div>
                        <div class="mb-3">
                            <label for="comment_content" class="form-label">Comment</label>
                            <textarea class="form-control" id="comment_content" name="content" rows="3" required></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit Comment</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5>Post Information</h5>
            </div>
            <div class="card-body">
                <p><strong>Published:</strong> {{ post.date }}</p>
                <p><strong>Author:</strong> {{ post.author }}</p>
                <p><strong>Category:</strong> <span class="badge bg-secondary">{{ post.category }}</span></p>
                <p><strong>Reading Time:</strong> {{ post.reading_time }} minutes</p>
            </div>
        </div>
        
        <div class="card mt-3">
            <div class="card-header">
                <h5>Share This Post</h5>
            </div>
            <div class="card-body">
                <button class="btn btn-outline-primary me-2">Facebook</button>
                <button class="btn btn-outline-info me-2">Twitter</button>
                <button class="btn btn-outline-danger">Pinterest</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}